<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>认证app</title>
		<link rel="stylesheet" type="text/css" href="./css/api.css"/>
		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
		<style>
			body {
				background-color: #fff;
			}
			#footer {
				background-color: #fff;
				height: 52px;
				overflow: hidden;
			}
			#footer ul li {
				padding-top: 32px;
				padding-bottom: 4px;
				background: url() no-repeat center 7px;
				background-size: auto 22px;
				text-align: center;
				color: #979797;
				font-size: 12px;
			}
			#footer ul li.active {
				color: #18b4ed;
			}
			#footer ul li:nth-child(1) {
				background-image: url(./icon/icon_shuoye_normal.png);
			}
			#footer ul li:nth-child(2) {
				background-image: url(./icon/icon_gangwei_normal.png);
			}
			#footer ul li:nth-child(3) {
				background-image: url(./icon/icon_new_normal.png);
			}
			#footer ul li:nth-child(4) {
				background-image: url(./icon/icon_wode_normal.png);
			}
			#footer ul li:nth-child(1).active {
				background-image: url(./icon/icon_shuoye_selected.png);
			}
			#footer ul li:nth-child(2).active {
				background-image: url(./icon/icon_gangwei_selected.png);
			}
			#footer ul li:nth-child(3).active {
				background-image: url(./icon/icon_new_selected.png);
			}
			#footer ul li:nth-child(4).active {
				background-image: url(./icon/icon_wode_selected.png);
			}
		</style>
	</head>
	<body>
	<body>
		<!-- <div id="white_div"></div> -->
		<div id="wrap" class="flex-wrap flex-vertical">
			<div id="main" class="flex-con"></div>
			<div id="footer" class="border-t">
				<ul class="flex-wrap" >
					<li tapmode="hover" onclick="randomSwitchBtn( this, 0 );" class="flex-con active"  >
						首页
					</li>
					<li tapmode="hover" onclick="randomSwitchBtn( this, 1 );" class="flex-con" >
						岗位
					</li>
					<li tapmode="hover" onclick="randomSwitchBtn( this, 2 );" class="flex-con" >
						新闻
					</li>
					<li tapmode="hover" onclick="randomSwitchBtn( this, 3 );" class="flex-con" id="personal"  >
						认证中心
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="script/api.js"></script>
	<script type="text/javascript">
		apiready = function() {
//			alert("教师端轮播" + JSON.stringify(api.pageParam))
			api.setScreenOrientation({
				orientation : "portrait_up"
			});
		   if(api.pageParam.type ==1){//消息列表
           var eFootLis = $api.domAll('#footer li');
              $api.removeCls(eFootLis[0], 'active');
             $api.addCls(eFootLis[3], 'active');
               setupGroup(3);
			}else{//首页
			   setupGroup(0);
			}
			/*ios系统的状态栏*/
			DetermineTheIosStatusBarar();
			/*监听到首页中点了最新岗位 新闻中心更多按钮*/
			MonitoringMoreButton();

		
			
		
		};
		function MonitoringMoreButton() {
			/*监听到首页中点了最新岗位 新闻中心更多按钮*/
			api.addEventListener({
				name : 'jumpPage'
			}, function(ret, err) {
//							alert(ret.value.page);
				if (ret) {//api.pageParam.type,
					var selectIndex = ret.value.page;
					$api.setStorage('tabbarSelectedIndex', selectIndex);
					var num = selectIndex;
					setSwitch(selectIndex);
				} else {
				}
			});
		}

		//设置切换
		function setSwitch(selectIndex) {
			var eFootLis = $api.domAll('#footer li'), eHeaderLis = $api.domAll('header li'), index = selectIndex;
			for (var i = 0, len = eFootLis.length; i < len; i++) {
				if (i == selectIndex) {
				} else {
					$api.removeCls(eFootLis[i], 'active');
					$api.removeCls(eHeaderLis[i], 'active');
				}
			}
			$api.addCls(eFootLis[index], 'active');
			$api.addCls(eHeaderLis[index], 'active');
			//切换导航
			api.setFrameGroupIndex({
				name : 'group',
				index : selectIndex
			});
			//切换frame
			if (selectIndex == 1) {
				api.sendEvent({
					name : 'hideMessageFrameNotifi'
				});
				api.sendEvent({
					name : 'showDirectoriesFrameNotifi'
				});
				api.sendEvent({
					name : 'hideManagementFrameNotifi'
				});
			}
			if (selectIndex == 2) {
				api.sendEvent({
					name : 'hideMessageFrameNotifi'
				});
				api.sendEvent({
					name : 'showManagementFrameNotifi'
				});
				api.sendEvent({
					name : 'hideDirectoriesFrameNotifi'
				});
			}
			if (selectIndex == 3) {
				api.sendEvent({
					name : 'showPersonNotifi'
				});
				api.sendEvent({
					name : 'hideManagementFrameNotifi'
				});
				api.sendEvent({
					name : 'hideDirectoriesFrameNotifi'
				});
			}
			
		}

		function DetermineTheIosStatusBarar() {
			var systemType = api.systemType;
			if (systemType == 'ios') {
				api.setStatusBarStyle({
					style : 'light'
				});
			}
		}

		function setupNotifi() {
			api.addEventListener({
				name : 'offlineCloseWinNotifi'
			}, function(ret, err) {
				api.closeWin({
				});
			});
			//安卓下按2返回键退出
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				api.closeWin({
				});
			});
		}

		function setupGroup(index) {
//			alert("教师端轮播" + JSON.stringify(api.pageParam))
			var eHeaderLis = $api.domAll('header li'), frames = [];
			//添加首页
			frames.push({
				name : 'HomePage',
				url : 'html/HomePage/Home_frame.html',
				bgColor : '#fff',
				bounces : false,
				vScrollBarEnabled : false,
				pageParam : {
					sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle,
					type : 'Certification'
				}
			});
			//添加岗位页
			frames.push({
				name : 'Quarters',
				url : 'html/Quarters/Quarters.html',
				bgColor : '#fff',
				bounces : false,
				vScrollBarEnabled : false,
				pageParam : {
					sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle,
					type : 'Certification'
				}
			});
			//添加新闻页
			frames.push({
				name : 'News',
				url : 'html/News/News.html',
				bgColor : '#fff',
				bounces : false,
				vScrollBarEnabled : false,
				pageParam : {
					sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle,
					type : 'Certification'
				}
			});
			//添加个人中心
			frames.push({
				name : 'Personal',
				url : 'html/Personal/Personal.html',
				bgColor : '#fff',
				bounces : false,
				reload : true,
				vScrollBarEnabled : false,
				hScrollBarEnabled : false,
				pageParam : {
					sourceurl : api.pageParam.sourceurl,
					sourcetitle : api.pageParam.sourcetitle,
					type : 'Certification',
					index :index
				}
			});
			var bottomH = $api.byId('footer').offsetHeight;
			//52
			var y = 0;
			//y : $api.dom('header').offsetHeight,
			var h = api.winHeight - bottomH;
			//h : $api.dom('#main').offsetHeight
			api.openFrameGroup({
				name : 'group',
				background : '#fff',
				scrollEnabled : false,
				rect : {
					x : 0,
					y : y,
					w : api.winWidth,
					h : h
				},
				index : index,
				frames : frames,
				preload : 3,
			}, function(ret, err) {
			});
		}

		// 随意切换按钮
		function randomSwitchBtn(tag, num) {
			//设置tabbar选中下标
			$api.setStorage('tabbarSelectedIndex', num);
			/*
			 if (tag == $api.dom('#footer li.active'))
			 return;
			 */
			var eFootLis = $api.domAll('#footer li'), eHeaderLis = $api.domAll('header li'), index = 0;
			for (var i = 0, len = eFootLis.length; i < len; i++) {
				if (tag == eFootLis[i]) {
					index = i;
				} else {
					$api.removeCls(eFootLis[i], 'active');
					$api.removeCls(eHeaderLis[i], 'active');
				}
			}
			$api.addCls(eFootLis[index], 'active');
			$api.addCls(eHeaderLis[index], 'active');
			api.setFrameGroupIndex({
				name : 'group',
				index : index
			});
			if (num == 0) {
				api.sendEvent({
					name : 'showMessageFrameNotifi'
				});
			} else {
				api.sendEvent({
					name : 'hideMessageFrameNotifi'
				});
			}
			if (num == 1) {
				api.sendEvent({
					name : 'showDirectoriesFrameNotifi'
				});
			} else {
				api.sendEvent({
					name : 'hideDirectoriesFrameNotifi'
				});
			}
			if (num == 2) {
				api.sendEvent({
					name : 'showManagementFrameNotifi'
				});
			} else {
				api.sendEvent({
					name : 'hideManagementFrameNotifi'
				});
			}
			if (num == 3) {
				api.sendEvent({
					name : 'showPersonNotifi'
				});
			} else {
				api.sendEvent({
					name : 'hidePersonNotifi'
				});
			}
		}
	</script>
</html>